<template>
  <div class="chat-message-container">
    <div class="chat-message-list">
      <div class="chat-message-list-search">
        <div class="chat-message-list-search-bodys">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchData"></el-input>
        </div>
      </div>
      <div class="chat-message-list-body" @scroll="_messageListLoading($event)">
        <div
          v-for="item in messageList"
          :key="item.msgId"
          :class="{ 'chat-message-list-item-select': item.SELECT, 'chat-message-list-item': true }"
          @click="_selectChatMessageItem(item)"
        >
          <img class="chat-message-list-item-left" src alt />
          <div class="chat-message-list-item-right">
            <div class="chat-message-list-item-title-date">
              <div class="chat-message-list-item-title">{{item.msgContent}}</div>
              <div class="chat-message-list-item-date">20/02/02</div>
            </div>
            <div class="chat-message-list-item-msg-tip">111111111111111111111111111111111111</div>
          </div>
        </div>
        <div>
          <i class="el-icon-loading" v-if="messageBoxLoading"></i>
        </div>
      </div>
    </div>
    <div class="chat-message-box">
      <div class="chat-message-box-header"></div>
      <div class="chat-message-box-body" ref="chatMessageBoxBody">
        <div class="chat-message-box-body-own">
          <div>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
          <img src alt style="height: 40px; width: 40px; background: yellow;" />
        </div>
        <div
          class="chat-message-box-body-other"
          v-for="(item, index) in messageDetailsArr"
          :key="index"
        >
          <img src alt style="height: 40px; width: 40px; background: yellow;" />
          <div>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        </div>
      </div>
      <div class="chat-message-box-form">
        <el-input
          type="textarea"
          v-model="textareaData"
          :autosize="true"
          resize="none"
          class="chat-message-box-form-textarea"
        ></el-input>
        <div class="chat-message-box-form-button">
          <el-button type="primary" size="small" @click="_addMessage">发送</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatMessage',
  created () {
    this.getDiscussMsgList()
  },
  mounted () {
    this.$refs.chatMessageBoxBody.scrollTo(
      0,
      this.$refs.chatMessageBoxBody.scrollHeight
    )
  },
  data () {
    return {
      searchData: '',
      messageList: [],
      discussId: '',
      textareaData: '',
      messageBoxLoading: false,
      messageBoxLoadingRunning: false,
      messageDetailsArr: []
    }
  },
  methods: {
    getDiscussMsgList () {
      return new Promise(resolve => {
        let data = {
          discussId: this.discussId
        }
        this.$axios({
          method: 'post',
          url: `/discussMsg/list`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.messageBoxLoading = false
          let list = []
          res.data.data.forEach(x => {
            let obj = {}
            Object.assign(obj, { msgContent: x.msgContent })
            Object.assign(obj, { msgId: x.msgId })
            Object.assign(obj, { manId: x.manId })
            Object.assign(obj, { msgType: x.msgType })
            Object.assign(obj, { status: x.status })
            list.push(obj)
          })
          this.messageList = list
          this.messageList.map(item => {
            item['SELECT'] = false
            item['HOVERSELECT'] = false
          })
          resolve()
          console.log('messageList', this.messageList)
        })
      })
    },
    _selectChatMessageItem (messageItem) {
      console.log(messageItem)
      if (messageItem) {
        if (messageItem.SELECT) {

        } else {
          this.messageList.map(item => {
            if (item.SELECT) {
              item.SELECT = false
            }
          })
          messageItem.SELECT = true
          this.messageList = [...this.messageList]
        }
      }
    },
    _messageListLoading (e) {
      let ele = e.target
      if (!this.messageBoxLoadingRunning) {
        if (ele.scrollTop + ele.clientHeight === ele.scrollHeight) {
          this.messageBoxLoadingRunning = true
          this.messageBoxLoading = true
          this.getDiscussMsgList().then(() => {
            setTimeout(() => {
              this.messageBoxLoadingRunning = false
            }, 400)
          })
        }
      }
    },
    _addMessage () {
      this.messageDetailsArr.unshift({})
      setTimeout(() => {
        this.$refs.chatMessageBoxBody.scrollTo(
          0,
          this.$refs.chatMessageBoxBody.scrollHeight
        )
      })
    }
  }
}
</script>

<style scoped>
.chat-message-container {
  width: 100%;
  height: 100%;
  display: flex;
}
.chat-message-list {
  flex: 1.5;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.chat-message-box {
  flex: 3;
}
.chat-message-list-search {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #e0e9f2;
  line-height: 60px;
}
.chat-message-list-search-bodys {
  width: 90%;
  display: inline-block;
  height: 30px;
}
.chat-message-list-body {
  height: calc(100% - 60px);
  overflow-x: hidden;
  overflow-y: auto;
}
.chat-message-list-body::-webkit-scrollbar {
  width: 8px;
}
.chat-message-list-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.chat-message-list-item {
  padding: 10px;
  height: 40px;
  cursor: pointer;
  display: flex;
}
.chat-message-list-item-left {
  height: 40px;
  width: 40px;
  background-color: red;
}
.chat-message-list-item-right {
  width: calc(100% - 40px);
  display: flex;
  padding-left: 10px;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 14px;
}
.chat-message-list-item-title-date {
  display: flex;
  justify-content: space-between;
}
.chat-message-list-item-title {
  width: 81.38px;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  text-align: left;
}
.chat-message-list-item-date {
  width: 57px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}
.chat-message-list-item-msg-tip {
  text-align: left;
  font-size: 12px;
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.4);
}
.chat-message-list-item-select {
  background-color: #4890eb;
}
.chat-message-list-item-select .chat-message-list-item-title {
  color: white;
}
.chat-message-list-item-select .chat-message-list-item-date {
  color: rgba(255, 255, 255, 0.4);
}
.chat-message-list-item-select .chat-message-list-item-msg-tip {
  color: rgba(255, 255, 255, 0.4);
}
.chat-message-box-header {
  height: 60px;
  background-color: aquamarine;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.chat-message-box-body {
  height: calc(100% - 202px);
  background-color: white;
  padding: 10px;
  overflow-y: auto;
}
.chat-message-box-body::-webkit-scrollbar {
  width: 8px;
}
.chat-message-box-body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}
.chat-message-box-form {
  height: 120px;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.chat-message-box-form /deep/ textarea {
  height: 90px !important;
  border-radius: 0;
  border: none;
}
.chat-message-box-form /deep/ textarea::-webkit-scrollbar {
  width: 8px;
}
.chat-message-box-form-button {
  text-align: right;
  padding-right: 10px;
}
.chat-message-box-form /deep/ .el-button {
  padding: 5px 20px;
}
.chat-message-box-body-other {
  margin: 10px 0;
  text-align: left;
}
.chat-message-box-body-other img {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  background: yellow;
}
.chat-message-box-body-other div {
  display: inline-block;
  max-width: 290px;
  word-break: break-all;
  vertical-align: top;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 5px;
  border-radius: 6px;
  margin-left: 5px;
}
.chat-message-box-body-other div::before {
  content: "";
  position: absolute;
  border: 8px solid;
  border-color: transparent rgba(0, 0, 0, 0.2) transparent transparent;
  top: 10px;
  left: 0;
  transform: translate(-100%, 0);
}
.chat-message-box-body-other div::after {
  content: "";
  position: absolute;
  border: 8px solid;
  border-color: transparent white transparent transparent;
  top: 10px;
  left: 1px;
  transform: translate(-100%, 0);
}
.chat-message-box-body-own {
  margin: 10px 0;
  text-align: right;
}
.chat-message-box-body-own img {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  background: yellow;
}
.chat-message-box-body-own div {
  display: inline-block;
  max-width: 290px;
  word-break: break-all;
  vertical-align: top;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 5px;
  border-radius: 6px;
  margin-right: 5px;
}
.chat-message-box-body-own div::before {
  content: "";
  position: absolute;
  border: 8px solid;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.2);
  top: 10px;
  right: -33px;
  transform: translate(-100%, 0);
}
.chat-message-box-body-own div::after {
  content: "";
  position: absolute;
  border: 8px solid;
  border-color: transparent transparent transparent white;
  top: 10px;
  right: -32px;
  transform: translate(-100%, 0);
}
</style>
